<script setup>
// 基本数据类型,{},[],[1,2,3],建议用ref定义，{name:"",age:"",dataList:[]}类似这种必须写属性的对象用reactive定义,
import { reactive, ref, provide, readonly, computed } from "vue";
import HelloWorld from "./HelloWorld.vue";
import brother1 from "./brother1.vue";
import brother2 from "./brother2.vue";
import demo from "./ss/demo.vue";
import demo2 from "../动态组件和异步组件和suspence/src/eee/qq/demo2.vue";
import piniaDtore from "../pinia的使用,pinia用来替代vuex/index";
const rfd = ref(456);
const obj = reactive({
  name: "wangjian",
  age: 20,
  rfd,
  poten: [1, 2, 3],
});
const message = ref("");
//gather是孙子组件通过子组件<hellowChild v-bind="$attrs"></hellowChild>中的v-bind="$attrs"传过来的事件
const gather = (val) => {
  message.value = val;
};
const title = ref("我是爷爷组件");
function updatetitle(val) {
  title.value = val;
}
provide("title", {
  title: readonly(title), //readonly是只读的意思，provide和readonly经常配合使用，readonly是为了让子组件不能修改父组件传过来的值
  updatetitle,
});
const handleClick = () => {
  alert(3333);
};
const listArray = reactive({
  name: "oeor",
  wer: {
    aae: 1,
  },
  lyt: [1, 3, 4],
});
const _objLists = computed(() => piniaDtore().objLists);
function ters() {
  console.log(123456000000);
  return 123;
}
const titlssde = ref(620);

const yterd = reactive({
  name: "yueyeghdgf",
  age: 20,
});
const refsdd = ref(null);
</script>
<template>
  <div>
    {{ ters() }}
  </div>
  <span
    @click="
      piniaDtore().objLists.length = 0;
      aaa = 1500;
      www = 1520;
    "
    >{{ _objLists }}</span
  >
  <button @click="title = 'ssw'">爷爷按钮</button>
  <!-- 下面这两种写法是等价的 -->
  <!-- <HelloWorld msg="我是爷爷组件传过来的" :name="obj.name" :age="obj.age" /> -->
  <!-- 子组件的根节点不会继承ref和key属性 -->
  <HelloWorld
    msg="我是爷爷组件传过来的"
    v-bind="obj"
    @gather="gather"
    @handleEdit="aaa = 12000"
    :yterd="readonly(yterd)"
    ref="refsdd"
    key="123"
    tersd="456"
    class="styleColor"
  />
  {{ message }}
  <hr />
  <!-- 下面四个都是兄弟组件 兄弟组件的意思是只要在同一个父组件下面，也就是有同一个爹，他们就是兄弟组件，和组件本身所在的具体文件夹路径没有关系-->
  <div>
    <p>
      <demo @click="handleClick" :listArray="listArray"></demo>
    </p>
  </div>
  <demo2></demo2>
  <brother1></brother1>
  <brother2></brother2>
</template>

<style scoped>
.styleColor {
  color: red;
}
</style>
